<template>
	<view class="detail-page">
		<u-navbar autoBack bgColor="transparent">
			<view slot="left" class="navbar-title">
				<u-icon name="arrow-left" color="#fff" size="34rpx"></u-icon>
			</view>
		</u-navbar>
		
		<view class="swiper-box">
			<u-swiper
				:list="goodsInfo.imgs"
				keyName="url" height="750rpx" radius="0"
				circular indicatorStyle="right: 20px"
				@change="swiperChange"
			>
				<view slot="indicator" class="indicator-num">
					<view class="left">
						<text>{{ swiperCurrent + 1 }}</text>
					</view>
					<view class="right">
						<text>{{ goodsInfo.imgs.length }}</text>
					</view>
				</view>
			</u-swiper>
		</view>
		
		<view class="container">
			<view class="price-box">
				<view class="price">
					<text class="icon">￥</text>
					<text class="value">{{ goodsInfo.price }}</text>
				</view>
				<view class="original">原价￥{{ goodsInfo.original_price }}</view>
			</view>
			<view class="title">{{ goodsInfo.name }}</view>
			<button class="btn" @click="goOrder">立即加入</button>
			<view class="tips-box">
				<view class="tips">{{ config.web_site_title }} · 让小白变大咖</view>
			</view>
		</view>
		
		<view class="parse-box">
			<u-parse :content="goodsInfo.detail" :tagStyle="tagStyle"></u-parse>
		</view>
		
		<view class="bottom-box" v-if="btnShow">
			<button class="btn" @click="goOrder">立即加入</button>
		</view>
	</view>
</template>

<script>
	import { getGoodsDetail, getConfig } from '@/api/api.js'
	
	export default {
		data () {
			return {
				spu: '',
				goodsInfo: {
					imgs: []
				},
				
				swiperCurrent: 0,
				tagStyle: {
					video: `width: 100%;height: 1000rpx;vertical-align: middle;`,
					img: 'vertical-align: middle;',
				},
				
				btnBottom: 0,
				btnShow: false,
				
				config: {},
			}
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this)
			query.select('.container .btn').boundingClientRect((data) => {
				this.btnBottom = data.bottom
			}).exec()
		},
		onLoad (options) {
			this.spu = options.spu

			uni.showLoading({ mask: true })
			getGoodsDetail({ spu: this.spu }).then(res => {
				uni.hideLoading({ noConflict: true })
				if (res) {
					this.goodsInfo = res.data.data
				}
			})
			
			getConfig().then(res => {
				if (res) {
					this.config = res.data
				}
			})
		},
		onShareAppMessage (el) {
			return {
				path: '/pages/index/detail?spu=' + this.spu,
			}
		},
		methods: {
			swiperChange (e) {
				this.swiperCurrent = e.current
			},
			goOrder () {
				uni.navigateTo({
					url: '/pages/index/order',
					success: (res) => {
						res.eventChannel.emit('onOrder', this.goodsInfo)
					}
				})
			}
		},
		onPageScroll (e) {
			if (e.scrollTop > this.btnBottom) {
				this.btnShow = true
			} else {
				this.btnShow = false
			}
		}
	}
</script>

<style lang="scss">
.detail-page {
	box-sizing: border-box;
	min-height: 100%;
	padding-bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	background-color: #030395;
	.navbar-title {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.container {
		padding: 26rpx 35rpx 50rpx;
		.price-box {
			.price {
				display: inline;
				color: #9bfb4e;
				font-weight: bold;
				.icon {
					font-size: 22rpx;
				}
				.value {
					font-size: 40rpx;
				}
			}
			.original {
				margin-left: 20rpx;
				display: inline;
				color: #fff;
				font-size: 24rpx;
				text-decoration: line-through;
			}
		}
		.title {
			margin-top: 48rpx;
			color: #fff;
			font-size: 34rpx;
		}
		.btn {
			margin-top: 96rpx;
			border-radius: 100rpx;
			color: #3f3307;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 100rpx;
			background-color: #ffd849;
		}
		.tips-box {
			margin-top: 78rpx;
			text-align: center;
			.tips {
				display: inline-block;
				color: rgba(255, 255, 255, 0.8);
				font-size: 28rpx;
				font-weight: bold;
				line-height: 76rpx;
				background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
			}
		}
	}
	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		padding: 0 28rpx;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		height: 120rpx;
		background-color: rgba(0, 0, 0, 0.8);
		display: flex;
		align-items: center;
		.btn {
			flex: 1;
			border-radius: 100rpx;
			color: #3f3307;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 100rpx;
			background-color: #ffd849;
		}
	}
}
</style>
